 import {useState,useEffect,useRef} from 'react';
//  useState 使用状态,useEffect使用副作用(模拟生命周期) useRef 使用dom引用
// useContext,useCallback,useMemo,useLayoutEffect

function App(){ 
  // 定义状态,和修改状态的方法,设置默认值为5
  const [num,setNum] = useState(5);
  const [count,setCount] = useState(8);
  // 生命周期挂载完毕 ,获取本地存储中num
  useEffect(()=>{
    console.log("模拟挂载完毕");
    var n = localStorage.getItem("num")||1;
    setNum(n*1);
    // 模拟卸载完毕
    return ()=>console.log("卸载")
  },[])

  // 模拟生命的的更新完毕(监听num的变化存储num)
  useEffect(()=>{
    console.log("监听num的变化-更新完毕")
    localStorage.setItem("num",num);
  },[num])

  // 模拟监听所有数据的变化(更新完毕)
  useEffect(()=>{
    console.log("任意数据变化")
  })
  const inpRef = useRef();
  return (<div>
    <h1>函数组件-hooks</h1>  
    <button onClick={()=>setNum(num+1)}>{num}</button>
    <button onClick={()=>setCount(count+5)}>count:{count}</button>
    <input type="text" ref={inpRef} /> 
    <button onClick={()=>alert(inpRef.current.value)}>提示</button>
    </div>) 
}
export default App;